<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../src/ExtDraggableObject.js"></script>
<script>
  function init() {
    var zoomSlider = new ExtDraggableObject(document.getElementById("zoom"), {restrictX:true, intervalY:8, toleranceX:50, toleranceY:25, container:document.getElementById("zoomSlider")});

    var dragEndEvent = google.maps.event.addListener(zoomSlider, "dragend", function() {
      var val = 19 - zoomSlider.valueY();
      if (map.getZoom() !== val) {
        map.setZoom(val);
      }
    });
    var latlng = new google.maps.LatLng(37.313477473067, -121.880502070713);
    var map = new google.maps.Map(document.getElementById("map_canvas"), {zoom:8, center:latlng, mapTypeId:google.maps.MapTypeId.ROADMAP, disableDefaultUI:true});
    zoomSlider.setValueY(11);

    var centerChanged = google.maps.event.addListener(map, "center_changed", function() {
      mapZoom.setCenter(map.getCenter());
    });
    var zoomChanged = google.maps.event.addListener(map, "zoom_changed", function() {
      zoomSlider.setValueY(19 - map.getZoom());
    });

    var zoomIn = google.maps.event.addDomListener(document.getElementById("zoomIn"), "click", function() {
      map.setZoom(map.getZoom() + 1);
    });
    var zoomOut = google.maps.event.addDomListener(document.getElementById("zoomOut"), "click", function() {
      map.setZoom(map.getZoom() - 1);
    });
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map_canvas" style="position:absolute;top:0px;left:0px;width:100%;height:100%;"></div>
<div id="zoomContainer" style="position:absolute;top:25px;left:25px">
<div id="zoomIn" style="padding: 0px; margin:0px;position:absolute;top:0px;left:0px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:24px;height:22px;cursor:pointer;background-position:-17px -65px;">&nbsp;</div>
<div id="zoomSlider" style="padding: 0px; margin:0px;position:absolute;top:22px;left:0px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:24px;height:161px;cursor:pointer;background-position:-17px -87px;">&nbsp;
<div id="zoom" style="padding: 0px; margin:0px;position:absolute;top:0px;left:2px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:20px;height:12px;cursor:pointer;background-position:0px -384px;">&nbsp;</div>
</div>
<div id="zoomOut" style="padding: 0px; margin:0px;position:absolute;top:183px;left:0px;overflow-x:hidden;overflow-y:hidden;background-image:url(http://maps.gstatic.com/intl/en_us/mapfiles/mapcontrols3d5.png);background-repeat:no-repeat;width:24px;height:22px;cursor:pointer;background-position:-17px -360px;">&nbsp;</div>
</div>
</body>
</html>